<template>
  <div class="html_all">
    <div class="box80">
      <div class="selectLampList">
        <div class="selectLampList_cont">
          <div class="tabs">
            <router-link :to="{ path: '/selectLampList' }" class="onPitch">
              <p class="font16">全部</p>
            </router-link>
            <router-link :to="{ path: '/selectLampList',query:{id:item.id} }" v-for="item in typeList" :key="item.id">
              <div class="imgss">
                <div :style="{backgroundImage:'url('+ImgPath + item.sketchMap + ')'}"></div>
              </div>
              <p class="font16">{{item.contestDescribe}}</p>
            </router-link>
          </div>
        </div>
        <div class="bukong lampClassOn">
          <div class="table_Top">
            <el-form ref="form" :model="form">
              <div class="bukong_bom">
                <div class="cont">
                  <div class="font16">灯具参数筛选</div>
                  <div class="bukong_bom_list">
                    <el-popover placement="right" trigger="click" width="610" v-model="showlampBrand">
                      <el-button size="mini" type="text" @click="showlampBrand = false">
                        <i class="el-icon-close"></i>
                      </el-button>
                      <div class="bukong_bom_list_search">
                        <el-form-item>
                          <el-input v-model="searchBrand" placeholder="请输入内容">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                          </el-input>
                          <button @click="ClickSearchBrand">搜索</button>
                        </el-form-item>
                      </div>
                      <div class="bukong_bom_list_cont">
                        <ul class="wid100">
                          <li
                            v-for="(item, index) in lampBrandList"
                            :data-index="index"
                            @click="chooseBrand(item,index)"
                            :key="index"
                            :class="{'active': item.delFlag == '1'}">
                            <div class="imgs">
                              <div class="BoxTable">
                                <div class="BoxCell">
                                    <img :src="ImgPath + item.brandLogo" >
                                    <label class="el-upload-list__item-status-label"><i class="el-icon-upload-success el-icon-check"></i></label>
                                </div>
                              </div>
                            </div>
                            <p>{{item.brandName}}</p>
                          </li>
                        </ul>
                      </div>
                      <div class="redrt">*只提供会员品牌搜索</div> 
                      <el-button slot="reference">灯具品牌</el-button>
                    </el-popover>
                    <el-popover placement="right" trigger="click" width="840" v-model="showlampType" >
                      <div classs="bukong_bom_list_cont_s">
                        <el-button size="mini" type="text" @click='showlampType = false' class="dewddd">
                            <i class="el-icon-close"></i>
                        </el-button>
                        <div class="bukong_bom_list_cont">
                            <ul class="wid100">
                            <li
                                v-for="(item, index) in lampTypeList"
                                :data-index="index"
                                @click="chooseLamp(item,index)"
                                :key="index"
                                :class="{'active': item.delFlag == '1'}">
                                <div class="imgs">
                                <div class="BoxTable">
                                    <div class="BoxCell">
                                        <img :src="ImgPath + item.sketchMapOriginal" >
                                        <label class="el-upload-list__item-status-label"><i class="el-icon-upload-success el-icon-check"></i></label>
                                    </div>
                                </div>
                                </div>
                                <p>{{item.lampName}}</p>
                            </li>
                            </ul>
                        </div>
                       </div> 
                      <el-button slot="reference">灯具类型</el-button>
                    </el-popover>
                    <el-popover placement="top" trigger="click" popper-class="chicun">
                      <div class="size">
                        <el-form-item label="长/直径">
                          <el-input v-model="form.longNs" @blur="blurZhengshu()"></el-input>
                          <span>mm</span>
                        </el-form-item>
                        <el-form-item label="宽">
                          <el-input v-model="form.widthNs" @blur="blurZhengshu()"></el-input>
                          <span>mm</span>
                        </el-form-item>
                        <el-form-item label="高">
                          <el-input v-model="form.heightNs" @blur="blurZhengshu()"></el-input>
                          <span>mm</span>
                        </el-form-item>
                      </div>
                      <el-button slot="reference">灯具尺寸</el-button>
                    </el-popover>
                  </div>
                </div>
                <div class="cont">
                  <div class="font16">光学参数筛选</div>
                  <div class="bukong_bom_list">
                    <el-popover placement="top" trigger="click">
                      <div class="size size_all">
                        <ul>
                          <li @click="setPower(0,10)">≤10W</li>
                          <li @click="setPower(10,30)">10W-30W</li>
                          <li @click="setPower(30,50)">30W-50W</li>
                          <li @click="setPower(50,80)">50W-80W</li>
                          <li @click="setPower(80,120)">80W-120W</li>
                          <li>
                            <el-form-item>
                              <el-input v-model="form.powerMin" @blur="blurFixdg2()"></el-input> ~ 
                              <el-input v-model="form.powerMax" @blur="blurFixdg2()"></el-input>
                            </el-form-item>
                          </li>
                        </ul>
                      </div>
                      <el-button slot="reference">功率</el-button>
                    </el-popover>
                    <el-popover placement="bottom" trigger="click" >
                      <div class="size size_all">
                        <ul>
                          <li @click="chooseColorFlag(item,index)" v-for="(item,index) in colorFlagList" :class="{'active': item.delFlag == '1'}" :key="item.id" v-html="item.dictCont"></li>
                          <li>
                            <el-form-item>
                              <el-input v-model="form.colorTempeMin" @blur="blurFixdg2()"></el-input> ~ 
                              <el-input v-model="form.colorTempeMax" @blur="blurFixdg2()"></el-input>
                            </el-form-item>
                          </li>
                        </ul>
                      </div>
                      <el-button slot="reference">色温色彩</el-button>
                    </el-popover>
                    <el-popover placement="bottom" trigger="click">
                      <div class="size size_all">
                        <ul>
                          <li @click="setSdcm(0,5)">0-5 SDCM</li>
                          <li @click="setSdcm(5,7)">5-7 SDCM</li>
                          <li @click="setSdcm(7,'')">＞7 SDCM</li>
                          <li>
                            <el-form-item>
                              <el-input v-model="form.sdcmMin" @blur="blurFixdg2()"></el-input> ~ 
                              <el-input v-model="form.sdcmMax" @blur="blurFixdg2()"></el-input>
                            </el-form-item>
                          </li>
                        </ul>
                      </div>
                      <el-button slot="reference">色容差</el-button>
                    </el-popover>
                    <el-popover placement="bottom" trigger="click" >
                      <div class="size size_all" style="width:400px">
                        <ul style="width:50%;float:left">
                          <li @click="setAngle1(0,10)">≤10°</li>
                          <li @click="setAngle1(10,20)">10-20°</li>
                          <li @click="setAngle1(20,45)">20-45°</li>
                          <li @click="setAngle1(45,60)">45-60°</li>
                          <li @click="setAngle1(60,90)">60-90°</li>
                          <li @click="setAngle1(90,'')">＞90°</li>
                          <li>
                            <el-form-item>
                              <el-input v-model="form.angle1Min" @blur="blurFixdg2()"></el-input> ~ 
							  <el-input v-model="form.angle1Max" @blur="blurFixdg2()"></el-input>
                            </el-form-item>
                          </li>
                        </ul>
                        <ul style="width:50%;float:left">
                          <li @click="setAngle2(0,10)">≤10°</li>
                          <li @click="setAngle2(10,20)">10-20°</li>
                          <li @click="setAngle2(20,45)">20-45°</li>
                          <li @click="setAngle2(45,60)">45-60°</li>
                          <li @click="setAngle2(60,90)">60-90°</li>
                          <li @click="setAngle2(90,'')">＞90°</li>
                          <li>
                            <el-form-item>
                              <el-input v-model="form.angle2Min" @blur="blurFixdg2()"></el-input> ~ 
							  <el-input v-model="form.angle2Max" @blur="blurFixdg2()"></el-input>
                            </el-form-item>
                          </li>
                        </ul>
                      </div>
                      <el-button slot="reference">光束角</el-button>
                    </el-popover>
                  </div>
                </div>
                <div class="cont">
                  <div class="font16">其他参数筛选</div>
                  <div class="bukong_bom_list">
                    <el-popover placement="top" popper-class="xiaoguo shchg" trigger="click">
                        <el-form-item class="effect ">
                            <el-input v-model="form.posCodeLike"></el-input>
                        </el-form-item>
                        <el-button slot="reference">样品编号</el-button>
                    </el-popover>
                    <el-popover placement="top" popper-class="xiaoguo shchg" trigger="click">
                      <el-form-item class="effect ">
                        <el-date-picker value-format="yyyy-MM-dd" format="yyyy-MM-dd" v-model="form.detectDateStart"></el-date-picker>
                        <span class="line">-</span>
                        <el-date-picker value-format="yyyy-MM-dd" format="yyyy-MM-dd" v-model="form.detectDateEnd"></el-date-picker>
                      </el-form-item>
                      <el-button slot="reference">上传时间</el-button>
                    </el-popover>
                    <el-popover placement="top" popper-class="xiaoguo shchg" trigger="click">
                      <el-form-item class="effect">
                        <el-input v-model="form.priceMin" @blur="blurZhengshu()"></el-input>
                        <span class="line">-</span>
                        <el-input v-model="form.priceMax" @blur="blurZhengshu()"></el-input>
                      </el-form-item>
                      <el-button slot="reference">参考价格</el-button>
                    </el-popover>
                  </div>
                </div>
              </div>
              <el-form-item>
                <el-button type="primary" @click="search(1)">确&nbsp;&nbsp;&nbsp;定</el-button>
              </el-form-item>
              <div class="pitchOn">
                  <div class="cont" v-show="chooselampBrandList.length>0"> 
                      <div class="title">灯具品牌：</div> 
                      <span v-for="item in chooselampBrandList" :key="item.id" >{{item.brandName}} <i class="el-icon-close" @click="removeBrand(item)"></i></span>
                      <!-- <span v-for="item in chooselampBrandList" :key="item.id" >{{item.brandName}}</span> -->
                      <!-- <i class="el-icon-close" @click="clearBrandList()"></i> -->
                  </div>
                  <div class="cont" v-show="chooseLampType.length>0">
                      <div class="title">灯具类型：</div> 
                      <span v-for="item in chooseLampType" :key="item.id" >{{item.lampName}}</span>
                      <i class="el-icon-close" @click="clearLampType()"></i>
                  </div>
                  <div class="cont" v-show="form.longNs != '' || form.widthNs != '' || form.heightNs != ''">
                      <div class="title">灯具尺寸：</div> 
                      <span v-show="form.longNs != ''">长≤{{form.longNs}}mm </span>
                      <span v-show="form.widthNs != ''">宽≤{{form.widthNs}}mm </span>
                      <span v-show="form.heightNs != ''">高≤{{form.heightNs}}mm </span>
                      <i class="el-icon-close" @click="clearLength()"></i>
                  </div>
                  <div class="cont" v-show="form.powerMin != '' || form.powerMax != ''">
                      <div class="title">功率：</div> 
                      <span v-if="form.powerMin != '' && form.powerMax != ''">
                        {{form.powerMin}}-{{form.powerMax}}W
                      </span>
                      <span v-else-if="form.powerMin != ''">
                        ≥{{form.powerMin}}W
                      </span>
                      <span v-else>
                        ≤{{form.powerMax}}W
                      </span>
                      <i class="el-icon-close" @click="clearPower()"></i>
                  </div>
                  <div class="cont" v-show="chooseColorFlagList.length>0"> 
                      <div class="title">色温色彩：</div> 
                      <span v-for="item in chooseColorFlagList" :key="item.id" v-html="item.dictCont"></span>
                      <i class="el-icon-close" @click="clearColorFlag()"></i>
                  </div>
                  
                  <div class="cont" v-show="form.colorTempeMin != '' || form.colorTempeMax != ''">
                      <div class="title">色温色彩：</div> 
                      <span v-if="form.colorTempeMin != '' && form.colorTempeMax != ''">
                        {{form.colorTempeMin}}-{{form.colorTempeMax}}
                      </span>
                      <span v-else-if="form.colorTempeMin != ''">
                        ≥{{form.colorTempeMin}}
                      </span>
                      <span v-else>
                        ≤{{form.colorTempeMax}}
                      </span>
                      <i class="el-icon-close" @click="clearColorTemp()"></i>
                  </div>
                  <div class="cont" v-show="form.sdcmMin != '' || form.sdcmMax != ''">
                      <div class="title">色容差：</div> 

                      <span v-if="form.sdcmMin != '' && form.sdcmMax != ''">
                        {{form.sdcmMin}}-{{form.sdcmMax}} SDCM
                      </span>
                      <span v-else-if="form.sdcmMin != ''">
                        ≥{{form.sdcmMin}} SDCM
                      </span>
                      <span v-else>
                        ≤{{form.sdcmMax}} SDCM
                      </span>

                      <i class="el-icon-close" @click="clearSdcm()"></i>
                  </div>
                  <div class="cont" v-show="form.angle1Min != '' || form.angle1Max != ''">
                      <div class="title">光束角：</div> 
                      <span v-if="form.angle1Min != '' && form.angle1Max != ''">
                        {{form.angle1Min}}-{{form.angle1Max}} °
                      </span>
                      <span v-else-if="form.angle1Min != ''">
                        ≥{{form.angle1Min}} °
                      </span>
                      <span v-else-if="form.angle1Max != ''">
                        ≤{{form.angle1Max}} °
                      </span>
                      <i class="el-icon-close"  v-show="form.angle1Min != '' || form.angle1Max != ''" @click="clearAngle1()"></i>

                      <span v-if="form.angle2Min != '' && form.angle2Max != ''">
                        {{form.angle2Min}}-{{form.angle2Max}} °
                      </span>
                      <span v-else-if="form.angle2Min != ''">
                        ≥{{form.angle2Min}} °
                      </span>
                      <span v-else-if="form.angle2Max != ''">
                        ≤{{form.angle2Max}} °
                      </span>
                      <i class="el-icon-close" v-show="form.angle2Min != '' || form.angle2Max != ''" @click="clearAngle2()"></i>
                  </div>

                  <div class="cont" v-show="form.posCodeLike != ''">
                      <div class="title"> 样品编号：</div> 
                      <span v-show="form.posCodeLike != ''">{{form.posCodeLike}}</span>
                      <i class="el-icon-close" @click="form.posCodeLike = ''"></i>
                  </div>

                   <div class="cont" v-show="form.priceMin != '' || form.priceMax != ''">
                      <div class="title">参考价格：</div> 
                      <span v-if="form.priceMin != '' && form.priceMax != ''">
                        {{form.priceMin}}-{{form.priceMax}}
                      </span>
                      <span v-else-if="form.priceMin != ''">
                        ≥{{form.priceMin}}
                      </span>
                      <span v-else>
                        ≤{{form.priceMax}}
                      </span>
                      <i class="el-icon-close" @click="clearPrice()"></i>
                    </div>
                  
                  <div class="cont" v-show="form.detectDateStart != '' || form.detectDateEnd != ''">
                      <div class="title">上传时间：</div> 
                       <span v-if="form.detectDateStart != '' && form.detectDateEnd != ''">
                        {{form.detectDateStart}}-{{form.detectDateEnd}}
                      </span>
                      <span v-else-if="form.detectDateStart != ''">
                        ≥{{form.detectDateStart}}
                      </span>
                      <span v-else>
                        ≤{{form.detectDateEnd}}
                      </span>
                      <i class="el-icon-close" @click="clearDetectDate()"></i>
                  </div>

              </div>
            </el-form>
          </div>
          <div class="table_Bom">
            <el-form ref="form" >
              <div class="table_Bom_top wid100">
                    <div class="lt_sw">
                    </div>
                  <div class="rt_sw">
                    <el-form-item>
                      <span v-for="(item,index) in DataTypeList" :key="index">
                        <input type="checkbox"  v-model="chooseDataType" :label="item.label" :value="item.value" /> {{item.label}}
                      </span>
                      <span>
                        <input type="checkbox"  v-model="ckbIES" /> IES
                      </span>
                      &nbsp;
                    </el-form-item>
                      <button  type="button" @click="tableStatus=3"><img src="@/assets/images/icon6_21.jpg" alt=""></button>
                      <button  type="button" @click="tableStatus=2"><img src="@/assets/images/icon7_23.jpg" alt=""></button>
                      <button  type="button" @click="tableStatus=1"><img src="@/assets/images/icon8_25.png" alt=""></button>
                    <span class="list_S"  @click="showSetDiv()"><el-button slot="reference"><img src="@/assets/images/icon9_27.png" alt="">列表显示项</el-button></span>
                  </div>
              </div>
              <div class="caled1"  v-show="tableStatus == 1">
                <selectLampTable v-on:tableOver="tableOver" v-on:setTotalCount="setTotalCount" v-on:contrastShow="contrastShow" v-on:contrast_single="contrast_single" ref="lampTable"></selectLampTable>
              </div>
              <div class="caled2 caled3" v-show="tableStatus == 2">
                    <ul class="wid100">
                        <li v-for="item in tableData" :key="item.id">
                            <div class="des">
                              <img @click="viewPicture(ImgPath+item.pseuColor)" class="imsg" :src="ImgPath+item.pseuColor" :height="picHeight" :width="picWidth" alt="">
                              <div class="btns_S">
                            <div class="BoxTable">
                            <div class="BoxCell">
                          
                            <span class="btn2" @click.stop="contrast_single(item)">
                              <el-tooltip content="加入对比" placement="top">
                                <img src="@/assets/images/jiaru_03.png" alt="">
                              </el-tooltip>
                            </span>
                            <span class="btn2" @click.stop="contrastShow(item)">
                              <el-tooltip content="数据详情" placement="top">
                                <img src="@/assets/images/xiangqing_05.png" alt="">
                              </el-tooltip>
                              </span>
                            <span class="btn2" v-show="item.isPilotLamp  == 1">
                               <el-tooltip content="一键试灯" placement="top">
                                <img src="@/assets/images/shideng_07.png" alt="">
                              </el-tooltip>
                            </span>
                               </div>
                               </div> 
                            </div>
                            </div>
                            <div class="cont">
                                <div class="font16">{{item.brandName}} {{item.power}}W</div>
                                <div class="font14">{{item.posCode}}</div>
                            </div>
                        </li>
                    </ul>
              </div>
              <div class="caled caled3" v-show="tableStatus == 3">
                    <ul class="wid100">
                        <li v-for="item in tableData" :key="item.id">
                            <div class="des">
                              <img @click="viewPicture(ImgPath+item.viewPhoto)" class="imsg" :src="ImgPath+item.viewPhoto" :height="picHeight" :width="picWidth" alt="">
                              <div class="btns_S">
                            <div class="BoxTable">
                            <div class="BoxCell">
                           
                            <span class="btn2" @click.stop="contrast_single(item)">
                              <el-tooltip content="加入对比" placement="top">
                                <img src="@/assets/images/jiaru_03.png" alt="">
                              </el-tooltip>
                            </span>
                            <span class="btn2" @click.stop="contrastShow(item)">
                              <el-tooltip content="数据详情" placement="top">
                                <img src="@/assets/images/xiangqing_05.png" alt="">
                              </el-tooltip>
                              </span>
                            <span class="btn2" v-show="item.isPilotLamp == 1">
                               <el-tooltip content="一键试灯" placement="top">
                                <img src="@/assets/images/shideng_07.png" alt="">
                              </el-tooltip>
                            </span>
                               </div>
                               </div> 
                            </div>
                            </div>
                            <div class="cont">
                                <div class="font16">{{item.brandName}} {{item.power}}W</div>
                                <div class="font14">{{item.posCode}}</div>
                            </div>
                        </li>
                    </ul>
              </div>
              <div style="text-align: right;margin-top:20px;color: #999999;" v-if="totalCount > 10">当前共计<span class='bolod'>{{totalCount}}</span>条数据符合条件，可缩小筛选范围</div>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <selectLampDetail ref="detail"></selectLampDetail>
    <div class="contrast_single el-message-box__wrapper" id="contrast_single"><!-- 加入对比 -->
      <div class="contrast_single_cont duibi">
        <div class="list_s">
          <ul>
              <li closable :disable-transitions="false" v-for="(item,index) in duibiList" :key="item.id">
                  <i class="el-icon-error" style="cursor:pointer;" @click="deleteDuibi(index)"></i>
                  <img :src="ImgPath+item.lumImage" width="80" height="80" alt="">
              </li>
          </ul>
            <div class="list_s_s">
              <button @click="gotoPk()">开始对比</button>
              <button @click="clearDuibi()">清空列表</button>
          </div>
        </div>
        <i class="el-icon-close" @click="contrastShowHide1()"></i>
      </div>
    </div>
  </div>
</template>
<script>
import selectLampDetail from '@/views/component/selectLampDetail.vue'
import selectLampTable from '@/views/component/selectLampTable.vue'
import _ from 'lodash'
import $ from 'jquery'
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
export default {
  data() {
    return {
        typeList: [], //分类列表
        lampTypeList:[], //灯具类型列表
	    lampBrandList:[],//灯具品牌列表
        lampBrandListBak:[],
        colorFlagList:[],//色温色彩列表
        showlampBrand: false, //显示灯具品牌弹窗
        searchBrand:'',//搜索品牌关键字
        chooselampBrandList:[], //选中品牌
        form:{
            angle1Min:'',
            angle2Min:'',
            angle1Max:'',
            angle2Max:'',
            posCodeLike:'',
            detectDateStart:'',
            detectDateEnd:'',
            priceMin:'',
            priceMax:'',
            //albedo:'0.4', //反射率
            albedoText:'',
            sD:'', //search D
            dataTypeStr:'', //典型应用场景检测、项目检测、厂家标称值
            isAudit: 1, //审核通过的
            contestTypeIds:'',
            contestTypeId:'',
            lampTypeIds:'',
            sH:'', //search H
            sW:'',//search W
            lumSizeMin :'', //search d1
            lumSizeMax :'', //search d2
            sW1:'', //search sw1
            lumSize:'', // search d
            sW2:'', //search sw2
            brandIds: "",  //灯具品牌ids
            lampIdsStr:'', //灯具类型
            longNs:'',//长
            widthNs:'',//宽
            heightNs: '', //高
            powerMin: '', //功率min
            powerMax: '', //功率max
            colorTempeMin: '', //色温min
            colorTempeMax: '', //色温max
            sdcmMin: '', //色容差min
            sdcmMax: '', //色容差max
            angleMin: '', //光束角1
            angleMax: '', //光束角2
            lightnessAveMin: '', //平均亮度min
            lightnessAveMax: '', //平均亮度max
            lightnessStart: '',//最小亮度
            lightnessEnd: '',//最小亮度
            lightnessMaxMin: '', //最大亮度min
            lightnessMaxMax: '', //最大亮度max
            evennessMin: '', //亮度均匀度min
            evennessMax: '', //亮度均匀度max
            lightIntensity1Min:'', //>=0
            lightIntensity2Min:'', // 水平右60°
            lightIntensity3Min:'',//垂直下45° 
            lightIntensity3Max:'',
            lightIntensity4Min:'', //垂直下60
            lightIntensity5Min:'', //水平左60
            lightIntensity6Min:'',//上30
            lightIntensity6Max:'',
            lightIntensity7Min:'',//垂直下10°
            lightIntensity8Min:'', //垂直上60° 
            lightIntensity9Min:'', //垂直下10°水平左60° 
            lightIntensity10Min:'',//垂直下10°水平右60°

            colorFlag: "", //颜色标识

            weightCode:'', //编码
            priceWeight: '', //权重排序 价格
            anbanHeightWeight:'', //权重排序 暗斑高度
            evennessWeight:'', //权重排序 亮度均匀度
            lightnessMaxWeight: '', //权重排 序最大亮度
            lightnessWeight: '',  //权重排序 最小亮度
            lightnessAveWeight: '', //权重排序 平均亮度
            powerWeight: '',  //权重排序 功率

            rows:20,
            page:1,
        },
        showlampType:false,
        chooseLampType:[], //选中的灯具类型
        chooseColorFlagList:[],//选中colorFlag

      ckbIES:false,
      sortRule:{prop:null,order:null},
      tabData:'', //table排序前的数据
      duibiList:[],
      quota:100,
      picWidth:'160px',
      picHeight:'160px',
      showPic:false, //查看图片
      showPicUrl:'', //图片地址
      id:0, //分类id
      childId:0, //子类id
      currentTypeInfo:{}, //当前分类
      currentChildType:{}, //当前分类的子类
      tableStatus:1, //切换
      chooseDataType:['1','2'], //典型 项目
      DataTypeList:[
      {
        label:'典型检测',
        value:'1'
      },
      {
        label:'项目检测',
        value:'2'
      }],
      tableData:[],
      totalCount:0,
      showPK: false, //显示对比弹窗
      showMorelistShow:false //设置列显示弹窗
    };
  },
  components:{
    selectLampDetail,
    selectLampTable
  },
  watch:{
    showlampBrand:function(val){
      if(val){
        this.searchBrand =  ''
        this.ClickSearchBrand()
      }
    },
    ckbIES:function(val){
      if(val){
        this.form.isLightIntensity = 1
      }else{
        this.form.isLightIntensity = ''
      }
        this.search(1)
    },
    //切换典型 检测 重新搜索
    chooseDataType:function(val,old){
        this.search(1)
    }
  },
  methods: {
    
    showSetDiv(){
        if(this.tableStatus == 1){
          this.$refs.lampTable.showSetDiv()
        }
    },
    initData() {
        let self = this;
        //加载分类信息
        this.$http.get("/api/contests/contestTypeList", {}, function(res) {
            if (res.success) {
                self.typeList = res.data;
            }
        });
        //加载灯具类型
        this.$http.get("/api/lampTypes/json", {}, function(res) {
            if (res.success) {
                self.lampTypeList = res.data;
            }
        });
        //加载灯具品牌列表
        this.loadBrand();
        //加载colorFlag
        this.loadColorFlag();
    },
    loadBrand(){
        let self = this
        this.$http.postQuery('/api/brands/detectionBrandjson',{isOrgState: true},function(res){
            if(res.success){
                for(var i = 0;i<res.data.length;i++){
                    res.data[i].delFlag = '0'
                }
                self.lampBrandList = res.data;
                self.lampBrandListBak = res.data;
            }
	    })
    },
    loadColorFlag(){
      var indexpinyin = 'dengjusecaifenlei';
      let self = this
      this.$http.get('/api/dictTypeAllList',{indexPinyin:indexpinyin},function(res){
        self.colorFlagList = res.data
      })
    },
    ClickSearchBrand(){
        var search = this.searchBrand.toLowerCase()
        if(search){
          this.lampBrandList = this.lampBrandListBak.filter(function(item) {
				  return item.brandName.toLowerCase().indexOf(search) > -1
			    })
        }else{
          this.lampBrandList = this.lampBrandListBak
        }
    },
    chooseBrand: function(item,index) {
      if(item.delFlag == '1'){
        this.lampBrandList[index].delFlag= "0"
      }else{
        this.lampBrandList[index].delFlag= "1"
      }
      var tempList = []
      let tempval = '';
      for(var i = 0;i<this.lampBrandListBak.length;i++){
        if(this.lampBrandListBak[i].delFlag == "1"){
          tempval+=this.lampBrandListBak[i].id + ","
          tempList.push(this.lampBrandListBak[i])
        }
      }
      tempval=tempval.substr(0,tempval.length-1)
      this.form.brandIds = tempval
      this.chooselampBrandList=tempList
    },
    chooseLamp: function(item,index) {
      if(item.delFlag == '1'){
        this.lampTypeList[index].delFlag= "0"
      }else{
        this.lampTypeList[index].delFlag= "1"
      }
      var tempList = []
      let tempval = '';
      for(var i = 0;i<this.lampTypeList.length;i++){
        if(this.lampTypeList[i].delFlag == "1"){
          tempval+=this.lampTypeList[i].id + ","
          tempList.push(this.lampTypeList[i])
        }
      }
      tempval=tempval.substr(0,tempval.length-1)
      this.form.lampIdsStr = tempval
      this.chooseLampType=tempList
    },
    blurZhengshu(){
      var height = this.form.heightNs
      var width = this.form.widthNs
      var long = this.form.longNs
      if(height != "" && !isNaN(height)){
        this.form.heightNs = parseInt(height)
      }else{
        this.form.heightNs = ''
      }
      if(width != "" && !isNaN(width)){
        this.form.widthNs = parseInt(width)
      }else{
        this.form.widthNs = ''
      }

      if(long != "" && !isNaN(long)){
        this.form.longNs = parseInt(long)
      }else{
        this.form.longNs = ''
      }

      var priceMin = this.form.priceMin
      var priceMax = this.form.priceMax
      if(priceMin != "" && !isNaN(priceMin)){
        this.form.priceMin = parseInt(priceMin)
      }else{
        this.form.priceMin = ''
      }
      if(priceMax != "" && !isNaN(priceMax)){
        this.form.priceMax = parseInt(priceMax)
      }else{
        this.form.priceMax = ''
      }

    },
    setPower(min,max){
      this.form.powerMin = min
      this.form.powerMax = max
    },
    blurFixdg2(){
      var powerMin = this.form.powerMin
      var powerMax = this.form.powerMax
      var colorTempeMin = this.form.colorTempeMin
      var colorTempeMax = this.form.colorTempeMax
      var sdcmMin = this.form.sdcmMin
      var sdcmMax = this.form.sdcmMax
      var angleMin = this.form.angleMin
      var angleMax = this.form.angleMax
      
      if(powerMin != "" && !isNaN(powerMin)){
        this.form.powerMin = parseFloat(powerMin).toFixed(2)
      }else{
        this.form.powerMin = ''
      }
      if(powerMax != "" && !isNaN(powerMax)){
        this.form.powerMax = parseFloat(powerMax).toFixed(2)
      }else{
        this.form.powerMax = ''
      }
      if(colorTempeMin != "" && !isNaN(colorTempeMin)){
        this.form.colorTempeMin = parseFloat(colorTempeMin).toFixed(2)
      }else{
        this.form.colorTempeMin = ''
      }
      if(colorTempeMax != "" && !isNaN(colorTempeMax)){
        this.form.colorTempeMax = parseFloat(colorTempeMax).toFixed(2)
      }else{
        this.form.colorTempeMax = ''
      }

      if(sdcmMin != "" && !isNaN(sdcmMin)){
        this.form.sdcmMin = parseFloat(sdcmMin).toFixed(2)
      }else{
        this.form.sdcmMin = ''
      }
      if(sdcmMax != "" && !isNaN(sdcmMax)){
        this.form.sdcmMax = parseFloat(sdcmMax).toFixed(2)
      }else{
        this.form.sdcmMax = ''
      }
      if(angleMin != "" && !isNaN(angleMin)){
        this.form.angleMin = parseFloat(angleMin).toFixed(2)
      }else{
        this.form.angleMin = ''
      }
      if(angleMax != "" && !isNaN(angleMax)){
        this.form.angleMax = parseFloat(angleMax).toFixed(2)
      }else{
        this.form.angleMax = ''
      }
    },
    chooseColorFlag(item,index){
      if(item.delFlag == '1'){
        this.colorFlagList[index].delFlag= "0"
      }else{
        this.colorFlagList[index].delFlag= "1"
      }
      var tempList = []
      let tempval = '';
      for(var i = 0;i<this.colorFlagList.length;i++){
        if(this.colorFlagList[i].delFlag == "1"){
          tempval+=this.colorFlagList[i].id + ","
          tempList.push(this.colorFlagList[i])
        }
      }
      tempval=tempval.substr(0,tempval.length-1)
      this.form.colorFlag = tempval
      this.chooseColorFlagList = tempList
    },
    setSdcm(min,max){
      this.form.sdcmMin = min
      this.form.sdcmMax = max
    },
    setAngle1(min,max)
    {
      this.form.angle1Min = min
      this.form.angle1Max = max
    },
    setAngle2(min,max)
    {
      this.form.angle2Min = min
      this.form.angle2Max = max
    },
    clearLength(){
      this.form.longNs = ''
      this.form.widthNs = ''
      this.form.heightNs = ''
    },
    clearPower(){
      this.form.powerMin = ''
      this.form.powerMax = ''
    },
    clearSdcm(){
      this.form.sdcmMin = ''
      this.form.sdcmMax = ''
    },
    clearAngle1(){
      this.form.angle1Min = ''
      this.form.angle1Max = ''
    },
    clearAngle2(){
      this.form.angle2Min = ''
      this.form.angle2Max = ''
    },
    clearLampType(){
      this.chooseLampType = []

      this.form.lampIdsStr = ''
      for(var i = 0;i<this.lampTypeList.length;i++){
        this.lampTypeList[i].delFlag = "0"
      }
    },
    clearBrandList(){
      this.chooselampBrandList=[]
      this.form.brandIds = ''
      for(var i = 0;i<this.lampBrandList.length;i++){
        this.lampBrandList[i].delFlag = "0"
      }

      for(var i = 0;i<this.lampBrandListBak.length;i++){
        this.lampBrandListBak[i].delFlag = "0"
      }
    },
    
        removeBrand(item){
      let tempval = '';
            for(var i = 0;i<this.lampBrandList.length;i++){
                if(item.id == this.lampBrandList[i].id){
                    this.lampBrandList[i].delFlag= "0"
                }
            }
            var tempList = []
            for(var i = 0;i<this.lampBrandListBak.length;i++){
                if(this.lampBrandListBak[i].delFlag == "1"){
                    tempList.push(this.lampBrandListBak[i])
          tempval+=this.colorFlagList[i].id + ","
                }
            }
            this.chooselampBrandList=tempList
          
            tempval=tempval.substr(0,tempval.length-1)
            this.form.brandIds = tempval
        },
    clearPrice(){
      this.form.priceMin = ''
      this.form.priceMax = ''
    },
    clearColorFlag(){
      this.chooseColorFlagList=[]
      this.form.colorFlag = ''
      for(var i = 0;i<this.colorFlagList.length;i++){
        this.colorFlagList[i].delFlag = "0"
      }
    },
    clearColorTemp(){
      this.form.colorTempeMin = ''
      this.form.colorTempeMax = ''
    },
    clearDetectDate(){
        this.form.detectDateStart = ''
        this.form.detectDateEnd = ''
    },

    tableOver(){
        this.search(1)
    },
    setTotalCount(data){
      this.tableData = data.tableData
      this.totalCount = data.totalCount
    },
    search(page){
      let self = this
    //   if(this.currentTypeInfo.childType == '灯具类型'){
    //     //父类contestTypeIds
    //     this.form.contestTypeIds = this.currentTypeInfo.contestTypeIds
    //     //子类 lampTypeIds
    //     this.form.lampTypeIds = this.currentChildType.lampTypeIds
    //     this.form.contestTypeId = ''
    //   }else if(this.currentTypeInfo.childType == '应用类型'){
    //     //若选中子类，传输子类的 contestTypeIds
    //     this.form.contestTypeIds = this.currentTypeInfo.contestTypeIds
    //     this.form.contestTypeId = this.currentChildType.contestTypeIds
    //     this.form.lampTypeIds = ''
    //   }
      this.form.page = page
      if(this.chooseDataType.length > 0){
        var temp = ''
        for(var i = 0;i<this.chooseDataType.length;i++){
          temp += this.chooseDataType[i] + ","
        }
        this.form.dataTypeStr = temp.substring(0,temp.length-1)
      }

console.log(this.form)
      this.$refs.lampTable.search(1,'all',this.form)
    },
    clearDuibi(){
      this.duibiList=[]
      document.getElementById("contrast_single").style.display="none";
    },
    deleteDuibi(index){
      this.duibiList.splice(index,1)
    },
    viewPicture(url){
      this.showPic = true
      this.showPicUrl = url
    },
    gotoPk(){
      var ids = ''
      for(var i=0;i<this.duibiList.length;i++){
        ids += this.duibiList[i].id + ","
      }

      let routeData = this.$router.resolve({ path: '/selectLamp/details', query: {  ids: ids,dian: this.currentTypeInfo.id} });
      window.open(routeData.href, '_blank');
    },
    contrastShow(row) {
      this.$refs.detail.show(row.id)
    },
    contrast_single(row){
      document.getElementById("contrast_single").style.display="block";
      if(this.duibiList.length >= 6){
        this.$alert('最多只能同时对比6个', '提示', {
          confirmButtonText: '确定',
          callback: action => {
          }
        });
        return
      }
      for(var i = 0;i<this.duibiList.length;i++){
        if(row.id == this.duibiList[i].id){
          return
        }
      }
      this.duibiList.push(row)
      
      console.log(this.duibiList)
    },
     contrastShowHide1(){
      document.getElementById("contrast_single").style.display="none";
    },
  },
  created() {
    this.initData();
  },
};
</script>
<style rel="stylesheet/scss" lang="scss">
.shchg {
  width: auto;
  .effect .el-input{
    width: auto;
     .el-input__inner{
       padding-left: 28px;
       padding-right: 10px;
      width: 129px;
    }
    span{
      margin: 0;
      top: -5px;
    }
  }
}
#main{
  margin-left: 90px;
}
.gallery-top{
  .swiper-slide{
    img{
      max-height: calc(44vh - 50px);
      max-height: -webkit-calc(44vh - 50px);
    }
  }
}
.surface{
  text-align: center;
  padding: 10px;
  font-size: 16px;
  display: block;
}
.jiaoIcon{
  position:absolute;
  right: 0;
  top:0;
  width: 50px;
}
.bukong_bom_list_cont_s{
  position: relative;
}
.caled3 li{
  cursor: pointer;
  .des{
    position: relative;
    .btns_S{
      width: 120px;
      position: absolute;
      width: auto;
      height:atuo;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      -webkit-transform: translate(-50%,-50%);
      .btn2{
        display: none;
        font-size: 12px;
        line-height: 1.5em;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 4px;
        margin: 2px;
        position: relative;
        z-index: 3;
        background: #fff;
        margin: 0 4px;
      }
    }
  }
  &:hover{
    .des .btns_S{
      .btn2{
        display: inline-block;
      }
      .btn1{
        display: none;
      }
    }
  }
}
</style>
<style rel="stylesheet/scss" lang="scss">
.swiper-button-white{
    background: rgba(0, 0, 0, 0.3);
    top:auto !important;
    margin-top: 0 !important;
    bottom: 0;
    height: 50px;
    background-size: 12px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
.bukong.lampClassOn .table_Bom .table_Bom_top{
  margin-bottom: 15px;
}
.bolod{
  color: red;
  font-weight: bold
}
.el-dialog__wrapper{
  height: 100%;
  max-width: 100%;
  min-height: 100%;
  .el-dialog{
  max-height: 80%;
  .el-dialog__body{
    height: 92%;
    position: relative;
    span{
      height: 100%;
    }
  }
}
}

.gallery-top-box{
  height: 100%;
  
}
.gallery-thumbs-box{
  .gallery-thumbs{
    .swiper-slide{
        border-radius: 4px;
        overflow: hidden;
        &.swiper-slide-thumb-active::after{
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top:0;
            background-color: rgba(32, 140, 198, 0.5);
        }
        
    }
  }
}

.contrast_single{
  display: none;
  position: fixed;
     min-height: 120px;
    min-width: 260px;
    height: 162px;
      bottom: 50px;
      top: auto;
      left: 50%;
      transform:translateX(-50%);
      -webkit-transform:translateX(-50%);
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    .contrast_single_cont{
    padding-bottom: 10px;
    vertical-align: middle;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    font-size: 18px;
    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    text-align: left;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    padding: 0;
    }
}
.canshu{
  .el-input{
    width: 80px;
    height: 30px;
    margin: 0 6px;
    .el-input__inner{
      height: 30px;
      line-height: 36px;
    }
  }
}
.table_Top .cent .bottom  .item_lt1{
  float: right;
  height: 40px;
    line-height: 40px;
}
.btns{
    width: 60px;
    padding: 0;
    height: 25px;
    line-height: 25px;
    span{
      display: inline-block;
    }
  }
  .label{display: inline-block;}
.xiala{
  min-width: 60px;
  padding: 10px 0;
  input{
    width: 90%;
    border-radius: 3px;
    border: 1px solid #ccc;
    margin:0 auto 6px;
    display: block;
  }
  
  ul{
    li{
      padding: 4px;
      text-align: center;
      cursor: pointer;
      &:hover{
       background-color: rgba(90, 99, 163, 0.6);
        color: #fff;
      }
    }
  }
}
.bukong_bom_list_TWO{
  .el-button{
    margin-right: 6px;
    margin-bottom: 6px;
  }
}
.pitchOn{
  .cont{
    display: inline-block;
    background-color: #ffffff;
    border-radius: 5px;
    border: solid 1px #e8e8e8;
    padding: 6px 11px;
    margin-right: 20px;
    &:last-child{
      margin-right: 0;
    }
    .title{
      display: inline-block;
      color: #888888;
    }
    span{
      display: inline-block;
      margin: 0 5px;
      color: #888888;
    }
    i{
      color: #e8e8e8;
      cursor: pointer;
    }
  }
}
.tabs a {
  float: left;
  
}
.tabs a .active {
  color: red;
}
.selectLampList {
  margin-top: 6rem;
  .selectLampList_cont{
	  background: #fff;
	padding: 3rem 3% 5px;
  }
}
.selectLampList .tabs {
  background-color: #f6f7fb;
  width: 100%;
  display: inline-block;
  a {
    height: 56px;
    line-height: 56px;
    text-align: center;
    color: #333333;
    width:12.2857%;
    padding: 0;
    float: left;
    position: relative;
    &::before{
      content: '';
      width: 1px;
      height: 18px;
      background: #eee;
      position: absolute;
      right: 0px;
      top: 19px;
      z-index: 9;
    }
	p{
		line-height: 1em;
		margin-top: 20px;
	}
    &.router-link-exact-active,&.onPitch {
      background-color: #5a62a3;
      color: #fff;
	    border: none;
	  p{
		  border-right:none;
	  }
    }
  }
}
.selectLampList .el-tabs--border-card {
  border: none;
  box-shadow: none;
}
.bukong {
  .el-form .el-button--primary{
    margin-top: 10px !important;
    border: none;
  }
  .table_Top_cont {
    padding: 0;
      .font18 {
        color: #333333;
        margin-bottom: 20px;
      }
      .lt {
        width: 260px;
        height: 482px;
        float: left;
        background-color: #f6f7fb;
        padding: 25px 28px;
        text-align: center;
        ul {
          margin: 20px 0;
        }
        li {
          height: 44px;
          line-height: 44px;
          color: #999999;
          background-color: #ffffff;
          border-radius: 3px;
          border: solid 1px #dfe6eb;
          margin-bottom: 20px;
          cursor: pointer;
          &:last-child {
            margin-bottom: 0;
          }
          input {
            border: none;
            height: 98%;
            text-align: center;
            width: 100%;
            color: #999;
            &::-webkit-input-placeholder {
              color: #999;
            }
          }
          &.active {
            background-color: #5a63a3;
            border-radius: 3px;
            color: #fff;
          }
        }
        img {
          cursor: pointer;
        }
      }
      .rt {
        width: 260px;
        float: right;
        background-color: #f6f7fb;
        padding: 12px 30px;
        text-align: center;
        height: 482px;
        .sc{
          position: relative;
          .iperb{
            position: initial;
            width: 19px;
            height: 11px;
            background: none;
            width: 19px;
            height: 11px;
            margin-top: 0;
            top: auto;
                display: inline-block;
          }
          .top,.bom{
            height: 25px;
            text-align: center
          }
          img{
            display: inline-block;
          }
          .top{
            img{
              cursor: pointer;
            }
          }
          .bom{
            img{
              cursor: pointer;
            }
          }
        }
        button {
          width: 72px;
          height: 29px;
          background-color: #ffffff;
          border-radius: 14px;
          border: none;
          img {
            position: relative;
            top: 3px;
            margin-right: 5px;
          }
        }
        .cont {
          height: 380px;
          white-space: nowrap;
          overflow: auto;
          &::-webkit-scrollbar {
            display: none;
          }
          ul {
            li {
              .imgs {
                position: relative;
                border-radius: 4px;
                overflow: hidden;
                height: 90px;
              }
              &.active .font14 {
                color: #5a63a3;
              }
              &.active .imgs::before {
                content: "";
                width: 100%;
                height: 100%;
                z-index: 3;
                box-shadow: 0px 1px 6px 0px rgba(233, 233, 233, 0.4);
                background-color: rgba(89, 98, 163, 0.4);
                position: absolute;
                top: 0;
                left: 0;
              }
              img {
                height: 90px;
                width: 100%;
              }
              .font14 {
                margin-bottom: 10px;
              }
            }
          }
        }
      }
      .cent {
        width: calc(100% - 520px);
        width: -webkit-calc(100% - 520px);
        float: left;
        padding: 0 5%;
        height: 482px;
        display: block;
        .cent_top{
          text-align: center;
          margin-bottom: 20px;
          padding-left: 60px;
          .item_lt1{
            display: inline-block;
            .label{
              margin-right: 6px;
            }
            &:first-child{
              margin-right:10%;
            }
          }
          .item_lt2{
            display: inline-block;
            width: 95px;
            margin-bottom: 10px;
            position: relative;
            &.itemss{
              .el-input{
                width: 60px;
                .el-input__inner{
                  border:1px solid #c9c9c9;
                  height: 25px;
                }
              }
            }
            &:first-child{
              margin-right: 10%;
            }
            .el-form-item__label{
              float: left;
              line-height: 1em;
              line-height: 25px;
              padding-right: 6px;
            }
            .el-form-item__content{
              line-height: initial;
            }
            .el-input{
              width: 44px;
              position: relative;
              .el-input__inner{
                border: none;
                height: 23px;
                position: relative;
                top: 1px;
                left: 1px;
                padding: 0 3px;
              }
            }
            
          }
        }
        .font18 {
          text-align: center;
          color: #333333;
          margin-bottom: 16px;
        }
        .chao{
          position: relative;
          .el-button{
            width: 100%;
            padding: 0;
            height: 25px;
            line-height: 25px;
          }
          .el-form-item{
            margin-bottom: 0;
            text-align: left;
            .el-input__inner{
              position: relative;
              z-index: 5;
              width: 45px;
              border: none;
              height: 23px;
              top: 1px;
              left: 1px;
              padding: 0 3px;
            }
          }
        }
        .item_lt{
          .el-form-item__content{
            line-height: initial;
            margin-top: 8px;
            .xian{
              transform:rotate(90deg);
              -ms-transform:rotate(90deg);
              -moz-transform:rotate(90deg);
              -webkit-transform:rotate(90deg); 
              -o-transform:rotate(90deg);
              display: inline-block;
            }
          }
        }
      }
  }
}
.bukong_bom_list_cont {
  position: relative;
  height: 360px;
  overflow: auto;
  margin-top: 18px;
  ul {
    li {
      float: left;
      width: 100px;
      text-align: center;
      background-color: #ffffff;
      margin: 5px;
      cursor: pointer;
      &.active{
        position: relative;
        .imgs{
           border: solid 1px #5962a3;
           position: relative;
           .el-upload-list__item-status-label{
            right: -17px;
            top: -7px;
            width: 46px;
            height: 26px;
            background: #5962a3;
            text-align: center;
            transform: rotate(45deg);
            box-shadow: 0 1px 1px #5962a3;
            display: block;
            .el-icon-check{
              color: #fff;
              position: absolute;
              right: 14px;
              top: 11px;
              transform:rotate(-50deg);
              -ms-transform:rotate(-50deg); 
              -moz-transform:rotate(-50deg); 
              -webkit-transform:rotate(-50deg); 
              -o-transform:rotate(-50deg);
            }
          }
        }
        p{
          color: #5962a3;
        }
      }
      .imgs {
        height: 90px;
        border: solid 1px #dcdcdc;
        border-radius: 4px;
        overflow: hidden;
        .BoxTable{
          height: 90px;
        }
        img{
             max-width: 90px !important;
             max-height: 80px;
           }
      }
      p {
        color: #333;
      }
    }
  }
}
.bukong_bom_list_search {
  .el-form-item__content {
    width: 300px;
    .el-input{
      width: 200px;
    }
    button{
          background-color: #5a63a3;
          border:none;
          color: #fff;
          padding: 0px 20px;
          height: 36px;
          line-height: 36px;
          margin-left: 10px;
          border-radius: 5px;
    }
  }
}

.el-button--mini {
  position: absolute;
  right: 30px;
  color: #000;
  font-size: 18px;
}
.deng_list {
  display: inline-block;
  position: relative;
  margin-right: 6px;
  .el-select {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    .el-select__tags {
      opacity: 0;
    }
    .el-input--suffix {
      .el-input__inner {
        opacity: 0;
      }
      .el-icon-arrow-up:before {
        display: none;
      }
    }
  }
  button {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    -webkit-transition: 0.1s;
    transition: 0.1s;
    font-weight: 500;
    -moz-user-select: none;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
    position: relative;
    z-index: 1;
  }
}

.size {
  text-align: center;
  .el-form-item {
    margin-bottom: 0px;
  }
  .el-form-item__label {
    width: 60px;
  }
  .el-form-item__content {
    display: inline-block;
    .el-input {
      display: inline-block;
      width: 60px;
      height: 26px;
      .el-input__inner {
        height: 100%;
        padding: 0 6px;
      }
    }
  }
  span {
    color: #333;
    margin: 0 5px;
  }
  li {
    cursor: pointer;
    margin: 10px 0;
    &:last-child{
      margin-bottom: 0;
    }
    &.active{//光学参数筛选的选中事件
          color: #409EFF;
          &::after{
            position: absolute;
            right: 20px;
            font-family: element-icons;
            content: "\E6DA";
            font-size: 12px;
            font-weight: 700;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
          }
    }
  }
}
// .size_all.size .el-input {
//   width: 100px;
// }
.effect {
  margin-bottom: 0;
  span {
    display: inline-block;
    margin: 0 10px;
  }
  .el-form-item__content {
    margin: auto;
    text-align: center;
    line-height: initial;
  }
  .el-input {
    width: 60px;
    .el-input__inner {
      width: 60px;
      height: 26px;
    }
  }
}
</style>
<style  rel="stylesheet/scss" lang="scss"   >
.guidePlate {
  &.bukong .cent .el-form-item__content {
    height: auto;
    line-height: initial;
    .xian {
      transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      display: inline-block;
    }
  }
  &.bukong .cent .bottom .el-form-item.item_lt2 {
    float: none;
    .el-form-item__label {
      height: 25px;
      line-height: 25px;
    }
  }
  &.bukong .cent .bottom .el-form-item.item_lt2 {
    width: 165px;
  }
}


.bukong .cent{
    .el-form-item__content{
            height: 30px;
        }
        .el-input__inner{
            height: 25px;
            background-color: #ffffff;
            border-radius: 5px;
            border: solid 1px #c9c9c9;
            padding: 0 3px;
        }
    .item_lt{
        width: 60px;
        float: left;
        text-align: center;
        margin-bottom: 0;
        label{
            width: 100%;
            display: block;
            text-align: center;
            float: none;
            line-height: 20px;
            padding: 0;
        }
    }
    .cout{
        width: calc(100% - 80px);
        width: -webkit-calc(100% - 80px);
        float: left;
        border-radius: 4px;
	    border: solid 1px #eeeeee;
        margin-left: 10px;
        text-align: center;
        height: 320px;
        line-height: 320px;
        text-align: center;
        .cout_list{
          height: 100%;
          padding: 10px;
			img{
				max-height: 100%;
			}
        }
    }
    .bottom{
      .label{
          margin-right: 6px;
        }
        text-align: center;
        margin-top: 20px;
        span.font14{
            float: left;
            height: 40px;
            line-height: 40px;
        }
        .el-form-item{
            display: inline-block;
            &.item_lt1{
                width: 86px;
                position: relative;
                
                .el-input{
                  position: relative;
                  left: -13px;
                  .el-input__inner{
                       top:1px;
                       position: relative;
                  }
                }
                .el-form-item__content{
                    width: 45px;
                    height: auto;
                    float: right;
                    .el-input__inner{
                      height: 22px;
                      border:none;
                      padding: 0 3px;
                    }
                }
                .el-form-item__label{
                    padding: 0;
                    height: 36px;
                    line-height: 44px;
                }
            }
            &.item_lt2{
               display: inline-block;
                width: 170px;
                .el-input{
                    width: 60px;
                    display: block;
                    float: left;
                }
                span{
                    float: left;
                    margin: 0 5px;
                }
            }
        }
    }
    
} 
.bukong_bom{
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    justify-content: space-between;
    margin-top: 30px;
    background-color: #f6f7fb;
	border-radius: 5px;
    padding: 20px;
    .cont{
      
    }
    .font16{
        color: #333333;
        margin-bottom: 10px;
    }
    .el-checkbox-button{
        margin-right: 8px;
        .el-checkbox-button__inner{
            border-radius: 4px;
            color: #666666;
            height: 38px;
            border: none;
        }
        &.is-checked .el-checkbox-button__inner{
            background: #5a63a3;
            color: #fff;
        }
        &:last-child{
            margin-right: 0;
        }
    }
}
.bukong .el-form .el-button--primary{
    display: block;
    margin: 3rem auto 0;
    height: 44px;
	background-color: #5a63a3;
	border-radius: 4px;
    width: 145px;
    font-size: 16px;
}
.conts .cont{
    display: inline-block;
    margin-right: 15px;
}
.bukong_bom .bukong_bom_list{
		.el-button{
			margin-bottom: 6px;
			margin-right: 6px;
		}
	}
  @media (max-width: 1500px){
    .bukong_bom .bukong_bom_list .el-button{padding: 10px 14px;}
    .deng_list{
      margin-right: 6px;
      button{padding: 10px 14px;}
    }
  }
@media (max-width: 1200px){
	.bukong {
		.table_Top_cont{
			.lt{
				width: 200px;
			}
			.rt{
				width: 200px;
			}
			.cent{
				width: calc(100% - 400px);
    			width: -webkit-calc(100% - 400px);
			}
		}
		.bukong_bom .bukong_bom_list{
			.el-button{
				padding: 8px 18px;
				font-size: 12px;
			}
			.deng_list button{
				padding: 0 18px;
				height: 30px;
				line-height: 30px;
				font-size: 12px;
			}
		}
		.el-form .el-button--primary{
			width: 120px;
			height: 36px;
			line-height: 36px;
			padding: 0;
		}
		.table_Bom{
			.lt_sw{float: none;}
			.rt_sw{float: none;}
		}
	}
}
@media (max-width: 992px){
	.bukong .table_Top_cont{
		.lt{
			width: 100%;
			height: auto;
		}
		.rt{
			width: 100%;
			height: auto;
		}
		.cent{
			width: 100%;
			height: auto;
			padding: 16px 0;
		}
	} 
}
@media (max-width: 767px){
	.selectLampList{
		margin-top: 66px;
	}

	.bukong_bom {
		display: block;
		.cont{
			margin-bottom: 6px;
			.font16{
				margin-bottom: 5px;
			}
		}
	}
	.bukong .table_Bom{
		.lt_sw{
			margin-bottom: 18px;
			.el-radio-group{
				display: initial;
			}
			.weight{
				padding: 0 12px;
			}
		}
		.rt_sw{
			span.font14{
				line-height: 20px;
			}
			.el-form-item .el-form-item__content{
				line-height: 20px;
				.el-radio{
					margin-right: 10px;
					.el-radio__label{
						padding-left: 5px;
					}
				}
			}
			.table_Bom .rt_sw button.el-button.list_btn{
				padding: 0;
			}
		}
	}
}
@media (max-width: 1400px){
  .bukong .bukong_bom .bukong_bom_list .el-button{
    padding: 8px 18px;
    font-size: 12px;
  }
    .bukong_bom_list_TWO .el-button,.deng_list .el-select .el-input--suffix .el-input__inner,.deng_list button{
      padding: 8px 18px;
      font-size: 12px;
    }
}
</style>
<style  lang="scss">
.list_S{
    .el-button img{
        position: relative;
        top: 5px;
        margin: 0 5px;
        display: inline-block;
    }
}
.dynamic-class{
    padding: 0;
    .el-button--mini{
        top: 7px;
    }
    .tp{
        background-color: #5a63a3;
        color: #fff;
        padding: 15px 25px;
    }
    .el-icon-error{
        color: #fff;
        font-size: 20px;
    }
    .contcheck{
         width: 770px;
         padding: 2% 5% 5%;
         .tishix{
          padding: 6px 15px;
          border-radius: 3px;
          background: rgba(90, 99, 163,0.2);
         }
         .el-form-item{
           margin-bottom: 0;
         }
         .el-form-item__content{
           line-height: 30px;
           .li_list{
             width: 20%;
            float: left;
            margin-right: 0;
            
            input{
              position: relative;
              top: 2px;
              margin-right: 3px;
            }
           }
         }
        .el-checkbox-group{
           width: 100%;
            padding: 15px 25px;
            display: inline-block;
            .el-checkbox{
                width: 25%;
                float: left;
                margin-right: 0;
            }
        }
        .btn{
            padding: 0 25px;
            text-align: center;
            button{
                padding: 7px 25px;
                background-color: #5a63a3;
                border-radius: 4px;
            }
        }
    }
}
.caled li{
    width: 20%;
    float: left;
    padding: 0 6px;
    background-color: #f7f7f7;
    border-radius: 4px;
    text-align: center;
    .des{
        
        border-radius: 4px 4px 0px 0px;
        background-repeat: no-repeat;
        background-size: cover;
        img.imsg{
          height: 260px !important;
          width: auto !important;
        }
    }
    .cont{
        padding: 12px;
        .font16{
            color: #5a63a3;
        }
        .font14{
            color: #666666;
            overflow:hidden; 
            display:-webkit-box; 
            -webkit-box-orient:vertical; 
            -webkit-line-clamp:1;
            text-overflow:ellipsis;
            word-break: break-all;
            line-height: 20px;
            height: 20px;
        }
    }
}
</style>
<style  lang="scss">
.list_S{
    .el-button img{
        position: relative;
        top: 5px;
        margin: 0 5px;
    }
}
.dynamic-class{
    padding: 0;
    .el-button--mini{
        top: 7px;
    }
    .tp{
        background-color: #5a63a3;
        color: #fff;
        padding: 15px 25px;
    }
    .el-icon-error{
        color: #fff;
        font-size: 20px;
    }
    .contcheck{
         width: 770px;
        .el-checkbox-group{
           width: 100%;
            padding: 15px 25px;
            display: inline-block;
            .el-checkbox{
                width: 25%;
                float: left;
                margin-right: 0;
            }
        }
        .btn{
            padding: 0 25px;
            text-align: center;
            button{
                padding: 7px 25px;
                background-color: #5a63a3;
                border-radius: 4px;
            }
        }
    }
}
.caled3{
background-color: #f7f7f7;

}
.caled2{
    li{
        width: 20%;
        float: left;
        background-color: #fff;
        border-radius: 4px;
        text-align: center;
        padding: 0 1%;
        &:nth-child(5n + 1){
            margin-left: 0;
        }
        .cont{
            padding: 12px;
            .font16{
                color: #5a63a3;
            }
            .font14{
                color: #666666;
                overflow:hidden; 
                display:-webkit-box; 
                -webkit-box-orient:vertical; 
                -webkit-line-clamp:1;
                text-overflow:ellipsis;
                word-break: break-all;
                line-height: 20px;
                height: 20px;
            }
        }
    }
}
.caled1{
  .el-table__row{
    .btns_S{
      // min-height: 72px;
      position: relative;
    }
    .btn1{
      position: absolute;
      top: 50%;
      left: 50%;
      transform:translate(-50%,-50%);
      -webkit-transform:translate(-50%,-50%);
    }
    .btn2{
      display: none;
      font-size: 12px;
      line-height: 1.5em;
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 4px;
      margin: 2px;
    }
    &:hover{
      .btn1{
        display: none;
      }
      .btn2{
        display: inline-block;
        cursor: pointer;
        &:hover{
          border-color:#ffa128;
        }
      }
    }
  }
}
</style>
<style  lang="scss">
.list_S{
    .el-button img{
        position: relative;
        top: 5px;
        margin: 0 5px;
    }
}
.dynamic-class{
    padding: 0;
    .el-button--mini{
        top: 7px;
    }
    .tp{
        background-color: #5a63a3;
        color: #fff;
        padding: 15px 25px;
    }
    .el-icon-error{
        color: #fff;
        font-size: 20px;
    }
    .contcheck{
         width: 770px;
        .el-checkbox-group{
           width: 100%;
            padding: 15px 25px;
            display: inline-block;
            .el-checkbox{
                width: 25%;
                float: left;
                margin-right: 0;
            }
        }
        .btn{
            padding: 0 25px;
            text-align: center;
            button{
                padding: 7px 25px;
                background-color: #5a63a3;
                border-radius: 4px;
            }
        }
    }
}

.contrast{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    background: rgba(0,0,0,0.5);
    z-index: -1;
    opacity: 0;
    display: none;
    &.active{
      opacity: 1;
      z-index: 99;
      display: block;
    }
    .contrast_cont{
        display: inline-block;
        max-width: 1100px;
        max-height: 90vh;
        width: 100%;
        padding-bottom: 10px;
        vertical-align: middle;
        background-color: #fff;
        border-radius: 4px;
        border: 1px solid #ebeef5;
        font-size: 18px;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        text-align: left;
        overflow: hidden;
        backface-visibility: hidden;
        padding: 0;
        .lt_rt{
            display: box;
            display: -webkit-box;
            display: -moz-box;
            display: -o-box;
            position: relative;
            .rt_ct{
                width: 50%;
                padding: 10px 20px;
                position: relative;
                table{
                  width: 100%;
                  td{
                    font-size: 14px;
                    text-align: center;
                  }
                } 
                .el-icon-close{
                    float: right;
                   font-size: 20px;
                   cursor: pointer;
                   position: relative;
                }
                .p1{
                  font-size: 12px;
                  margin-bottom: 5px;
                }
                .cont{
                    position: relative;
                    margin-top: 18px;
                     .set{
                         position: absolute;
                         text-align: right;
                         right: 0;
                         top: 70px;
                         color: #333333;
                     }
                    .xian{
                        color: #333333;
                        position: relative;
                        padding: 0px 0 6px;
                        border-bottom: 2px solid #eeeeee;
                        span{
                            position: absolute;
                            right: 0;
                            top: 0;
                            font-size: 14px;
                            cursor: pointer;
                        }
                        .xian_rt{
                            float: right;
                            font-size: 14px;
                             position: absolute;
                            right: 0;
                            top: 0;
                            span{
                                position: initial;
                                color: #208cc6;
                            }
                        }
                    }
                    ul{
                        margin: 1rem 0 2rem;
                        position: relative;
                        li{
                            width: 50%;
                            display: inline-block;
                            font-size: 12px;
                            margin-bottom: 2px;
                            color: #333333;
                            line-height: 1em;
                            span:first-child{
                                color: #000;
                                font-weight: bold
                            }
                            span{
                              span{
                                color: #333333 !important;
                                font-weight: 500 !important
                              }
                            }
                        }
                    }
                }
                .bottm{
                    text-align: center;
                        margin-top: 20px;
                    a{
                        background-color: #eeeeee;
                        font-size: 12px;
                            padding: 7px 15px;
                    }

                }   
            }
            .lt_ct{
                width: 50%;
                background-color: #f8f8f8;
                padding: 20px;
                position: relative;
                .top{
                    margin-bottom: 15px;
                    span{
                        color: #666666;
                        margin-right: 12px;
                        &:nth-child(1),&:nth-child(3){
                            color: #208cc6;
                        }
                        &:last-child{
                            float: right;
                            font-size: 12px;
                            margin-right:0;
                            img{
                                position: relative;
                                top: 2px;
                                margin-right: 5px;
                                display: inline-block;
                            }
                        }
                    }
                }
                .cents{
                  position: relative;
                  .cents_s{
                    height: 44vh;
                  }
                    .cout_list{
                      height: 100%;
                      .gallery-thumbs-box,.swiper-container,.swiper-wrapper{
                        height: 100%;
                      }
                        // img{
                        //    max-height: 44vh;
                        // }
                    }
                    .cent_ss{
                        overflow: auto;
                        margin-top: 16px;
                        padding: 0 38px;
                        li{
                            display: inline-block;
                            border-radius: 4px;
                            overflow: hidden;
                            margin-right: 10px;
                        }
                    }
                }
                .bom{
                    margin-top: 20px;
                    text-align: center;
                }
            }
        }
    }
}
.duibi{
    .el-icon-close{
        position: absolute;
        font-size: 18px;
        right: 5px;
        top: 5px;
        color: #fff;
        cursor: pointer;
        background: #5a63a3;
        border-radius: 50%;

    }
    .list_s{
        display: block;
        position: relative;
        padding: 10px;
        ul{
            display:block;
            margin-bottom: 6px;
            li{
                display: inline-block;
                position: relative;
                margin: 0 6px;
                padding: 5px;
                i{
                    position: absolute;
                    right: 5px;
                    top: 5px;
                    color: #5a63a3;
                }
            }
        }
        .list_s_s{
            display: block;
           text-align: center;
            button{
                height: 30px;
                border: 1px solid #DCDFE6;
                padding: 0 12px;
                border-radius: 3px;
                margin: 0 10px;
                cursor: pointer;
                &:first-child{
                    margin-bottom: 10px;
                }
            }
        }
    }
    
}
.shuju_cont_list{
    .font30{
        text-align: center;
        color: #333;
        margin-bottom: 20px;
    }
    .shuju_cont_lt{
        width: 450px;
        text-align: center;
        position: relative;
        padding-bottom: 45px;
        float: left;
        .tishi{
          position: absolute;
          right: 8px;
          bottom: 56px
        }
        .img{
            display: inline-block;
            margin: auto;
        }
        .el-form-item{
            width: 100px;
            position: absolute;
            .el-form-item__label{
                line-height: 25px;
                width: 28px;
            }
            .el-form-item__content{
                float: right;
                line-height: initial;
                width: 68px;
            }
            .el-input{
            
                .el-input__inner{
                    height: 25px;
                    background-color: #ffffff;
                    border-radius: 5px;
                    border: solid 1px #c9c9c9;
                }
            } 
            &.form1{
                top: 0;
                left: 100px;
                .el-form-item__label{
                    float:right;
                    padding: 0;
                }
                .el-form-item__content{
                    float: left;
                }
            }
            &.form2{
                top: 60px;
                .el-form-item__label{
                    float:right;
                    padding: 0;
                }
                .el-form-item__content{
                    float: left;
                }
            }
            &.form3{
                top: 60px;
                right: 10px;
                .el-form-item__label{
                    padding: 0;
                    line-height: 20px;
                    position: relative;
                    top: -8px;
                }
            }
            &.form4{
                top: 190px;
                width: 112px;
                .el-form-item__label{
                    float:right;
                    padding: 0;
                    line-height: 20px;
                    position: relative;
                    top: -8px;
                    width: 42px;
                    text-align: left;
                }
                .el-form-item__content{
                    float: left;
                }
            }
            &.form5{
                top: 190px;
                right:9px;
                .el-form-item__label{
                    padding: 0;
                    line-height: 20px;
                    position: relative;
                    top: -8px;
                }
            }
            &.form6{
                bottom: 0;
                left: 140px;
                margin-bottom: 0;
                .el-form-item__label{
                    float:right;
                    padding: 0;
                    line-height: 20px;
                    position: relative;
                    top: -8px;
                    text-align: left;
                }
                .el-form-item__content{
                    float: left;
                }
            }
        }
    }
    .shuju_cont_rt{
        float: right;
        width: 170px;
        padding-top: 7%;
        text-align: center;
        .el-radio-button{
          margin-bottom: 10px;
          .el-radio-button__inner{
                border-left: 1px solid #DCDFE6;
                border-radius: 3px;
          }
          &:last-child{
            margin-bottom: 0;
          }
        }
        button{
            width: 114px;
            height: 36px;
            background-color: #f6f7fb;
            border-radius: 4px;
            color: #333333;
            margin-left: 0;
            margin-bottom: 15px;
        }
    }
    .submit{
        text-align: center;
        button{
            height: 30px;
            background-color: #5a63a3;
            border-radius: 4px;
            line-height: 30px;
            padding: 0;
            width: 90px;
        }
    }
}
.weight{
    height: 34px;
    background-color: #eaeef1;
    border-radius: 4px;
    border: none;
    margin-right: 4px;
    color: #333333;
    position: relative;
    top: 3px;
}
.chicun{
  padding: 12px 20px;
}
.size .el-form-item {
  .el-form-item__content{
    .el-input{
      margin-right: 6px;
    }
  }
  button.el-button{
      padding: 8px 20px;
      width: 100%;
      background-color: #5a63a3;
      border: none;
      span{
          color: #fff;
      }
  }
}
.xiaoguo{
  padding: 12px 20px;
  &.brightness{
    ul{
      text-align: center;
      li{
        cursor: pointer;
        margin: 10px 0;
        .el-input .el-input__inner{
          padding: 0 6px
        }
      }
    }
  }
  .el-form-item{
    margin-bottom: 0;
    text-align: center;
    &.effect{
      margin-bottom: 12px;
    }
    .el-form-item__content{
      line-height: 30px;
      width: auto;
    }
    .el-button{
       padding: 8px 20px;
      background-color: #5a63a3;
      border: none;
      span{
          color: #fff;
      }
    }
  }
}
.xiqiang{
  width: calc(100% - 60px);
  width: -webkit-calc(100% - 60px);
  display: inline-block;
  .xiqiang_t{
    width: 50%;
    float: left;
    &.xiqiang_lt{
      text-align: right;
      padding-right: 5%;
    }
    &.xiqiang_rt{
      text-align: left;
      padding-left: 13%;
    }
    .item_lt1{
      float: none !important;
    }
  }
}
.fuhe{
  width: calc(100% - 60px);
  width: -webkit-calc(100% - 60px);
  display: inline-block;
  .fuhe_lt{
    width: 50%;
    float: left;
    text-align: center;
  }
  .fuhe_rt{
    width: 50%;
    float: left;
    text-align: center;
    .item_lt1{
      float: none !important;
    }
  }
}
.biaomian{
  width: calc(100% - 60px);
  width: -webkit-calc(100% - 60px);
  display: inline-block;
  text-align: center;
  .item_lt2{
    width: 90px !important;
  }
}
@media (max-width: 1500px){
  .contrast .contrast_cont .lt_rt .rt_ct .cont ul{
        margin: 5px 0 15px;
  }
}
.dewddd{
  top: 0;
  right: 10px;
}
.list_SAS{
  width: 770px;
  height: auto;
  .tp{
    display: none
  }
  .el-dialog__header{
    position: relative;
    background-color: #5a63a3;
    padding: 20px;
    width: 100%;
    .el-dialog__headerbtn{
      top: 8px;
    }
  }
  .el-dialog__body{
    padding: 0 0 20px;
     .contcheck .btn button{
       padding: 0;
     }
  }
  .cont{
    .title{
      font-size: 16px;
      color: #000;
      font-weight: bold;
      line-height: 1;
      margin-top: 8px;
    }
    .conts{
      display: inline-block;
      width: 100%;
    }
  }
}
.shiyi{
  height: 380px;
  .swiper-slide{
    .imgs{
      height: 94px;
    }
     &.active .font14 {
        color: #5a63a3;
      }
      &.active .imgs::before {
        content: "";
        width: 100%;
        height: 100%;
        z-index: 3;
        box-shadow: 0px 1px 6px 0px rgba(233, 233, 233, 0.4);
        background-color: rgba(89, 98, 163, 0.4);
        position: absolute;
        top: 0;
        left: 0;
      }
  }
}


</style>